	* {
		border: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	:root {
		--hue: 3;
		--trans-dur: 0.3s;
		font-size: calc(20px + (60 - 20) * (100vw - 320px) / (2560 - 320));
	}

	body {
		display: flex;
		font: 1em/1.5 sans-serif;
		height: 100vh;
		transition:
			background-color var(--trans-dur),
			color var(--trans-dur);
	}

	main {
		display: flex;
		margin: auto;
		min-height: 320px;
		width: 100%;
	}

	.pill,
	.pill__main,
	.pill__shadow {
		position: relative;
	}

	.pill {
		margin: auto;
		width: 5em;
		height: 2em;
	}

	.pill__main,
	.pill__main:before,
	.pill__main:after,
	.pill__glare,
	.pill__shadow {
		animation: pillLiftSpin 4s ease-in-out infinite;
	}

	.pill__main {
		background-image: linear-gradient(90deg, hsl(var(--hue), 90%, 97.5%) 50%, hsl(var(--hue), 90%, 50%) 50%);
		border-radius: 1em;
		width: 100%;
		height: 100%;
	}

	.pill__main:before,
	.pill__main:after {
		content: "";
		display: block;
		position: absolute;
		width: 50%;
		height: 100%;
	}

	.pill__main:before {
		animation-name: pillLeft;
		border-radius: 1em 0 0 1em;
		box-shadow:
			-1px 0 0 hsl(0, 0%, 100%) inset,
			0.125em 0.125em 0.5em hsl(var(--hue), 10%, 85%) inset,
			-0.125em -0.75em 0.5em hsl(var(--hue), 10%, 90%) inset;
	}

	.pill__main:after {
		animation-name: pillRight;
		border-radius: 0 1em 1em 0;
		box-shadow:
			-1px 0 0.25em hsl(var(--hue), 90%, 50%) inset,
			-0.25em -0.25em 0.25em hsl(var(--hue), 90%, 65%) inset,
			0.25em -0.5em 0.5em hsl(var(--hue), 90%, 40%) inset,
			-0.75em 0.5em 0.5em hsl(var(--hue), 90%, 65%) inset;
		right: 0;
	}

	.pill__glare {
		animation-name: pillGlare;
		background-color: hsl(0, 0%, 100%);
		box-shadow: 0 0 0.25em 0.2em hsl(0, 0%, 100%);
		position: absolute;
		border-radius: 0.05em;
		top: 0.95em;
		right: 0.95em;
		width: 0.1em;
		height: 0.1em;
		transform: rotate(45deg) translate(0, -0.6em) scale(1, 0.75);
		z-index: 1;
	}

	.pill__shadow {
		animation-name: pillShadowSpin;
		background-color: hsla(0, 0%, 0%, 0.5);
		border-radius: 1em;
		filter: blur(12px);
		margin: -1em auto 0 auto;
		width: 4.5em;
		height: 2em;
		transform: rotateX(60deg);
		z-index: -1;
	}

	/* Animations */
	@keyframes pillLiftSpin {
		from {
			transform: translateY(0) rotate(0);
		}

		16.67% {
			transform: translateY(-3em) rotate(0);
		}

		33.33%,
		66.67% {
			transform: translateY(-3em) rotate(-0.5turn);
		}

		50% {
			transform: translateY(0) rotate(-0.5turn);
		}

		83.33% {
			transform: translateY(-3em) rotate(-1turn);
		}

		to {
			transform: translateY(0) rotate(-1turn);
		}
	}

	@keyframes pillLeft {

		from,
		16.67%,
		83.33%,
		to {
			box-shadow:
				-1px 0 0 hsl(0, 0%, 100%) inset,
				0.125em 0.125em 0.5em hsl(var(--hue), 10%, 85%) inset,
				-0.125em -0.75em 0.5em hsl(var(--hue), 10%, 90%) inset;
		}

		33.33%,
		66.67% {
			box-shadow:
				-1px 0 0 hsl(0, 0%, 100%) inset,
				0.125em -0.125em 0.5em hsl(var(--hue), 10%, 85%) inset,
				-0.125em 0.75em 0.5em hsl(var(--hue), 10%, 90%) inset;
		}
	}

	@keyframes pillRight {

		from,
		16.67%,
		83.33%,
		to {
			box-shadow:
				-1px 0 0.25em hsl(var(--hue), 90%, 50%) inset,
				-0.25em -0.25em 0.25em hsl(var(--hue), 90%, 65%) inset,
				0.25em -0.5em 0.5em hsl(var(--hue), 90%, 40%) inset,
				-0.75em 0.5em 0.5em hsl(var(--hue), 90%, 65%) inset;
		}

		33.33%,
		66.67% {
			box-shadow:
				-1px 0 0.25em hsl(var(--hue), 90%, 50%) inset,
				-0.25em 0.25em 0.25em hsl(var(--hue), 90%, 65%) inset,
				0.25em 0.5em 0.5em hsl(var(--hue), 90%, 40%) inset,
				-0.75em -0.5em 0.5em hsl(var(--hue), 90%, 65%) inset;
		}
	}

	@keyframes pillGlare {

		from,
		16.67% {
			animation-timing-function: ease-in;
			width: 0.1em;
			transform: translateX(0) rotate(45deg) translate(0, -0.6em) scale(1, 0.75);
		}

		25% {
			animation-timing-function: linear;
			width: 0.1em;
			transform: translateX(0) rotate(180deg) translate(0, -0.6em) scale(1, 0.75);
		}

		27.77% {
			animation-timing-function: linear;
			width: 3.1em;
			transform: translateX(0) rotate(180deg) translate(0, -0.6em) scale(1, 0.75);
		}

		30.55% {
			animation-timing-function: ease-out;
			width: 0.1em;
			transform: translateX(-3em) rotate(180deg) translate(0, -0.6em) scale(1, 0.75);
		}

		33.33%,
		66.67% {
			animation-timing-function: ease-in;
			width: 0.1em;
			transform: translateX(-3em) rotate(225deg) translate(0, -0.6em) scale(1, 0.75);
		}

		75% {
			animation-timing-function: linear;
			width: 0.1em;
			transform: translateX(-3em) rotate(360deg) translate(0, -0.6em) scale(1, 0.75);
		}

		77.77% {
			animation-timing-function: linear;
			width: 3.1em;
			transform: translateX(0) rotate(360deg) translate(0, -0.6em) scale(1, 0.75);
		}

		80.55% {
			animation-timing-function: ease-out;
			width: 0.1em;
			transform: translateX(0) rotate(360deg) translate(0, -0.6em) scale(1, 0.75);
		}

		83.33%,
		to {
			width: 0.1em;
			transform: translateX(0) rotate(405deg) translate(0, -0.6em) scale(1, 0.75);
		}
	}

	@keyframes pillShadowSpin {
		from {
			filter: blur(12px);
			opacity: 1;
			width: 4.5em;
			transform: rotateX(60deg) scale(1);
		}

		16.67% {
			animation-timing-function: ease-in;
			filter: blur(16px);
			opacity: 0.8;
			width: 4.5em;
			transform: rotateX(60deg) scale(1.2);
		}

		25% {
			animation-timing-function: ease-out;
			filter: blur(16px);
			opacity: 0.9;
			width: 2em;
			transform: rotateX(60deg) scale(1.2);
		}

		33.33% {
			animation-timing-function: ease-in-out;
			filter: blur(16px);
			opacity: 0.8;
			width: 4.5em;
			transform: rotateX(60deg) scale(1.2);
		}

		50% {
			filter: blur(12px);
			opacity: 1;
			width: 4.5em;
			transform: rotateX(60deg) scale(1);
		}

		66.67% {
			animation-timing-function: ease-in;
			filter: blur(16px);
			opacity: 0.8;
			width: 4.5em;
			transform: rotateX(60deg) scale(1.2);
		}

		75% {
			animation-timing-function: ease-out;
			filter: blur(16px);
			opacity: 0.9;
			width: 2em;
			transform: rotateX(60deg) scale(1.2);
		}

		83.33% {
			animation-timing-function: ease-in-out;
			filter: blur(16px);
			opacity: 0.8;
			width: 4.5em;
			transform: rotateX(60deg) scale(1.2);
		}

		to {
			filter: blur(12px);
			opacity: 1;
			width: 4.5em;
			transform: rotateX(60deg) scale(1);
		}
	}
